<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最新版地图围栏</title>
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=LDCBZ-JNNRW-CGLR2-RKOXF-NRDZH-RZBBZ"></script>
</head>
<body>
    <div id="container" ></div>
</body>
<script>
        // 矩形区域的西南角与东北角
        let ne = new TMap.LatLng(40.662124, 109.821685); // 西南角
        let sw = new TMap.LatLng(40.660311, 109.818413); // 东北角

        // 设置中心点
        var center = new TMap.LatLng(40.661259, 109.820303);

        //  初始化地图
        let map = new TMap.Map("container", {
            zoom: 17, //设置地图缩放级别
            center: center, //设置地图中心点坐标
            doubleClickZoom: false
        });


        // 设置签到范围的剧情区域
        let rectangle = new TMap.LatLngBounds(sw, ne);
        
        // 初始化marker点
        let markerLayer = new TMap.MultiMarker({
            id: 'marker-layer',
            map: map
        });

        // 展示出签到范围
        let polygon = new TMap.MultiPolygon({
            map,
            geometries: [{
                paths: [
                    rectangle.getSouthWest(),
                    rectangle.getSouthEast(),
                    rectangle.getNorthEast(),
                    rectangle.getNorthWest()
                ]
            }]
        });
        
        // 地图添加点击事件
        map.on("click", (evt) => {
            // if (markerLayer) { 
            //     markerLayer.setMap(null); 
            //     markerLayer = null; 
            // }

            markerLayer.add({
            	position: evt.latLng
            });

            alert(`在区域里面吗${rectangle.contains(evt.latLng)}`)
        });


</script>
</html>